<template>
  <el-button :class="show ? 'textbutton float show' : 'textbutton float'" @mouseenter="mouseenter"
    @mouseleave="mouseleave">
    <el-icon>
      <Finished />
    </el-icon>
    <slot></slot>
  </el-button>
</template>

<script setup lang="ts">
import { ElButton, ElIcon } from "element-plus";
import { Finished } from "@element-plus/icons-vue";
import { CheckedListShowStore } from "@b/store";
import { computed } from "vue";

interface prop {
  top?: string;
}
const sCheckedListShowStore = CheckedListShowStore();
const show = computed(() => sCheckedListShowStore.show);
const { top = "50%" } = defineProps<prop>();
const mouseenter = () => sCheckedListShowStore.setShow(true)
const mouseleave = () => sCheckedListShowStore.setShow(false)
</script>

<style scoped>
.float {
  position: fixed;
  right: -62px;
  top: v-bind(top);
  z-index: 99;
  width: 100px;
  transition: right 1s;
}

.float.show {
  right: 0;
}
</style>
